<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Bootstrap</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/my_boot.css"/>
	</head>
	<body>
		<!--
			框架
				优点：
				1.节省开发时间
				2.开源、热门项目使用的开发人员多，解决问题方面比较方便
				3.基于框架开发的插件比较多
				缺点：
				1.需要基于框架开发，项目会比自己写的原生要稍微笨重
				2.需要一定的学习成本
				3.比较依赖框架的稳定性
				
				
				栅格布局：1.浮动float：left；2.百分比，3.媒体查询
		-->
		<div class="container">
			<!--栅格系统的行容器-->
			<div class="row">
				<!---->
				<div class="col-xs-12 col-sm-9 col-md-4">
					移动端吗？
				</div>
				<div class="col-sm-3 col-md-4 hidden-xs">
					不，是平板
				</div>
				<div class="col-md-4 hidden-xs hidden-sm">
					不，是pc
				</div>
				
				<div class="row">
					<div class="col-xs-3">小三</div>
					<div class="col-xs-3 col-xs-offset-2">小三与前面的隔开两份的距离</div>
					<div class="col-xs-3 col-xs col-xs-offset-1">小三</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-3 col-xs-push-9">小三
				<!--格子里面也需要栅格系统,就从row开始继续嵌套-->
				<div class="row">
					<div></div>
				</div>
				</div>
				<div class="col-xs-9 col-xs-pull-3">小九</div>
			</div>
		</div>
		<div class="container-fluid">
			响应式容器
		</div>
		
		
			<table class="table table-hover">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>01</td>
						<td>张三</td>
						<td>18</td>
					</tr>
					<tr>
						<td>02</td>
						<td>李四</td>
						<td>18</td>
					</tr>
					<tr>
						<td>02</td>
						<td>王五</td>
						<td>18</td>
					</tr>
				</tbody>
			</table>
			
			<button class="btn-danger">别点</button>
			
			
			
			
	</body>
</html>
